<!DOCTYPE html>

<html>

	<head>

		<!-- 页面字符编码 -->

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

		<meta name="apple-mobile-web-app-capable" content="yes">

		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<title></title>

		<link href="../css/mui.min.css" rel="stylesheet" />

		<link href="../fonts/iconfont.css" rel="stylesheet" />

		<link href="../css/index.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/calendar.css">

	</head>

	<body>

		<div class="mui-content  index7-mui-content">

		    <div class="header7" id="header5" >
		   	    <div class="auto">
		   	   	    <i class="iconfont icon-caidan"></i>
		   	   	    <i class="iconfont icon-sousuo"></i>
		   	   	    <p class="morning">February <span style="color:#b2b2b2;">2015</span></p>
		   	   	  
		   	   	    
		   	   	    <div class="day-time">
		   	   	    	
		   	   	        <ul>
		   	   	        	<li>DAY</li>
		   	   	        	<li>WEEK</li>
		   	   	        	<li><span class="line">MONTH</span></li>
		   	   	        	<div class="clear"></div>
		   	   	        </ul>
		   	   	    </div>
		   	    </div>

		   	    <div id="demo">
					<div id="ca"></div>
				</div>

		   	    <div class="footer4-box body-11">
		   	    	
		   	    	<div class="the-same  green oDiv" style="border-top:1px solid  #e4e4e4;">
		   	    		<div class="middle-box auto">
		   	    			<div><img src="../images/face1.jpg" alt=""></div>
			    			<p class="p-top">New Subpage for Janet</p>
			    			<p class="p-bottom">8-10pm</p>
		   	    		</div>
		   	    	</div>
		   	    	<div  class="the-same oDiv">
		   	    		<div class="middle-box auto">
		   	    			<div><img src="../images/face2.jpg" alt=""></div>
			    			<p class="p-top">Catch up with Tom</p>
			    			<p class="p-bottom">11-12pm Hangouts</p>
		   	    		</div>
		   	    	</div>
		   	    	<div  class="the-same oDiv" style="border:none;">
		   	    		<div class="middle-box auto">
		   	    			<div><img src="../images/face3.jpg" alt=""></div>
			    			<p class="p-top">Lunch with Diane</p>
			    			<p class="p-bottom">1pm Restaurant</p>
		   	    		</div>
		   	    	</div>
		   	    </div>
		   	    <div class="add-btn">
	   	   	     	<i class="iconfont  icon-add"></i>
	   	   	    </div>

		    
		    </div>


          


	</body>

</html>

<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script src="../js/calendar.js"></script>
<script type="text/javascript">
		//加小红点
		$('#ca').calendar({
			width: 320,
			height: 240,
			data: [{
				date: '2018/1/9',
				value: ' '
			}, {
				date: '2018/1/7',
				value: ' '
			}, {
				date: '2018/1/8',
				value: ' '
			}],
			onSelected: function(view, date, data) {
				console.log('view:' + view)
					//					alert('date1:' + date)
				console.log('data:' + (data || 'None'));
			}
		});
		$('#ca').css({'height':'280px'});
		$(".calendar .days li[data-calendar-day]").click(function() {
			$(".mui-fjpq-cont").show();
		});
	</script>